<script setup>
import {reqBanner} from "../api/home.js";
import {ref, reactive} from "vue";

// 发送请求获取
const banner_list = ref([])

async function getBanner() {
  let res = await reqBanner()
  banner_list.value = res.results
  console.log(banner_list.value)
}

getBanner()

</script>

<template>
  <div class="banner">
    <el-carousel height="400px" :interval="5000" arrow="always">
      <el-carousel-item v-for="banner in banner_list" :key="banner.id">
        <div v-if="banner.link.indexOf('http')>=0">
          <a :href="banner.link">
            <img :src="banner.image" :alt="banner.title">
          </a>
        </div>
        <div v-else>
          <router-link :to="banner.link">
            <img :src="banner.image" :alt="banner.title">
          </router-link>

        </div>


      </el-carousel-item>

    </el-carousel>
  </div>
</template>

<style scoped>
.el-carousel__item {
  height: 400px;
  min-width: 1200px;
}

.el-carousel__item img {
  height: 400px;
  width: 100%;
}
</style>